<template>
  <div>
    <a href="#/home">首页</a>&nbsp; <a href="#movie">电影</a>&nbsp;
    <a href="#/music">音乐</a>&nbsp;
    <a href="#/about">关于</a>
    <hr />
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyHome from "@/components/MyHome.vue";
import MyMovie from "@/components/MyMovie.vue";
import MyMusic from "@/components/MyMusic.vue";
import MyAbout from "@/components/MyAbout.vue";
export default {
  components: {
    MyHome,
    MyMovie,
    MyMusic,
    MyAbout,
  },
  data() {
    return {
      comName: "MyHome",
    };
  },
  // 利用created自动执行的特点，当组件创建后，created会自动执行
  created() {
    window.addEventListener("hashchange", () => {
      const hash = location.hash;
      if (hash === '#/home') {
        this.comName = 'MyHome'
      }
      if (hash === '#/movie') {
        this.comName = 'MyMovie'
      }
      if (hash === '#/music') {
        this.comName = 'MyMusic'
      }
      if (hash === '#/about') {
        this.comName = 'MyAbout'
      }
    });
  },
};
</script>

<style>
</style>